<template>
	<view class="content">


		<view class="boxContent" v-for="(item,index) in list" :key="item.id" @tap="goUrl(item)"
			:style="index==0?'margin-top: 20rpx;':''">
			{{item.title}}
			<image v-if='item.id != 5 && item.id!=7' src="../../static/set/right.png" class="rightImg"></image>
			<text v-if=' item.id==7'>4008007526</text>
			<!-- 	<switch v-show="item.id == 5"  color="#46DC71"
				style="transform:scale(0.7);margin-right:-20rpx" @change="switch1Change" /> -->
			<view class="switchBox" v-show="item.id == 5">
				<image src="@/static/set/select-switch.png" v-if="isChecked" class='switchIcon' mode=""
					@click="switch1Change(0)"></image>
				<image src="@/static/set/switch.png" mode="" v-else class='switchIcon' @click="switch1Change(1)">
				</image>
			</view>
		</view>




		<!-- 确认弹窗 -->
		<uni-popup :mask-click="false" ref='sendCode' type='center'>
			<view class="codeContent">
				<image src="@/static/mine/close.png" class='closeIcon' mode="" @click="cancelClose"></image>
				<view class="headerTitle">
					关闭提示
				</view>
				<view class="content">
					关闭后该账号后<span>互转积分将不再发送短信校验</span>,账号的安全性将降低，出现问题责任将由个人承担，请谨慎操作
				</view>

				<view class="input-content">
					<text class="label">验证码</text>
					<input placeholder="请输入验证码" type="number" placeholder-class="placeholder" v-model="msgCode" />
					<view class="code" @tap="getCodes">{{text}}</view>
				</view>

				<view class="btn_option">
					<view class='cancel-btn' @click='cancelClose'>
						暂不关闭
					</view>

					<view class='sure-btn' @click='confirmClose'>
						确认关闭
					</view>
				</view>
			</view>
		</uni-popup>


		<uni-popup :mask-click="false" ref='loginPassWord' type='center'>
			<view class="loginPassword">
				<image src="@/static/mine/close.png" class='closeIcon' mode="" @click="handleClose"></image>
				<view class="headerTitle">
					请输入登录密码
				</view>
				<view class="content">
					为保证您的账号安全，请输入您的登录密码
				</view>
				<view class="input-box">
					<input type="text" class='inputBox' placeholder="请输入登录密码" v-model='loginPassWord' />
				</view>

				<view class='sure-btn' @click='handleCloseversifyCode'>
					确认关闭
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		logout,
		userBalance,
		updateVerifyState,
		sendMsg
	} from '../../api/api.js'
	export default {
		data() {
			return {

				isChecked: false,
				loginPassWord: '',
				list: [{
						id: 1,
						title: '个人资料'
					},
					{
						id: 2,
						title: '隐私政策'
					},
					{
						id: 3,
						title: '用户协议'
					},
					{
						id: 7,
						title: '客服电话'
					},
					{
						id: 5,
						title: '短信验证'
					},
					{
						id: 6,
						title: '账号注销'
					},
					{
						id: 4,
						title: '退出登录'
					},
				],
				text: '获取验证码',
				msgCode: '',

			}
		},
		computed: {

		},
		mounted() {
			this.getUserBalance()

		},
		methods: {
			confirmClose() {
				if(!this.msgCode){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return 
				}
				this.$refs.sendCode.close();
				this.$refs.loginPassWord.open('center')
			},
			cancelClose() {
				this.getUserBalance()
				this.$refs.sendCode.close();
			},
			getUserBalance() {
				userBalance().then(res => {
					console.log('res', res)
					this.isChecked = res.data.smsCodeVerify == 1 // 1需要验证码 0不需要
				})
			},
			handleClose() {
				this.$refs.sendCode.close()
				this.$refs.loginPassWord.close()
				this.loginPassWord = ''
			},
			switch1Change(e) {
				console.log('switch1Change', e)
				this.isChecked = e == 1
				if (e == 0) {
					this.loginPassWord = ''
					this.$refs.sendCode.open('center');
					return
				} else {
					this.handleCloseversifyCode()
				}


			},
			handleCloseversifyCode() {
				let params={
					passwd: this.loginPassWord,
					verify: this.isChecked ? 1 : 0,
				}
				if(!this.isChecked){
					params.msgCode=this.msgCode
				}
				updateVerifyState(params).then(res => {
					console.log('updateVerifyState', res)
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						setTimeout(() => {
							this.handleClose()
							this.getUserBalance()
						}, 500)
					}
				})
			},
			goUrl(item) {
				if (item.id == 1) {
					uni.navigateTo({
						url: './userInfo'
					})
				} else if (item.id == 2) {
					uni.navigateTo({
						url: '/pages/set/agreement?title=' + '隐私政策'
					})
				} else if (item.id == 3) {
					uni.navigateTo({
						url: '/pages/set/agreement?title=' + '用户协议'
					})
				} else if (item.id == 4) {
					let data = {}
					logout(data).then(res => {
						console.log(res, 88)
						if (res.code == 200) {
							uni.clearStorageSync()
							uni.redirectTo({
								url: '../login/index'
							})
						}
					})
				}else if (item.id == 6) {
					uni.showModal({
						title:'',
						content:'您确定要注销此账号吗,注销之后不可登录!',
						success:function(res) {
							if (res.confirm) {
								let data = {}
								logout(data).then(res => {
									console.log(res, 88)
									if (res.code == 200) {
										uni.clearStorageSync()
										uni.redirectTo({
											url: '../login/index'
										})
									}
								})
							} else if (res.cancel) {
								
							}
						}
					})
					
				}
			},
			//获取验证码
			getCodes() {
				if (this.text != '获取验证码') {
					return false
				}
				let phone = uni.getStorageSync('phone')
				//判断手机号是否正确
				if ((/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))) {
					let data = {
						phone: phone,
						type: 11
					}
					sendMsg(data).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: '验证码已发送，请注意查收~'
							})
							//正确-发送验证码，变化 text 文字
							var seconds = 60;
							this.text = seconds + 's后重新获取';
							let interval = setInterval(() => {
								if (seconds > 0) {
									seconds--;
									this.text = seconds + 's后重新获取'
								} else {
									this.text = '获取验证码';
									clearInterval(interval)
								}
							}, 1000)
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请登录~'
					})
				}
			},

		}
	}
</script>

<style>
	page {
		background-color: rgba(246, 246, 247, 1);
	}
</style>
<style lang="less">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;

		.boxContent {
			width: 662rpx;
			height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0px 8rpx r8px 0px rgba(255, 255, 255, 0.25);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx 0 28rpx;
			font-family: DengXian, DengXian;
			font-weight: bold;
			font-size: 28rpx;
			color: #3C3C3C;

			.rightImg {
				width: 12rpx;
				height: 20rpx;
			}
		}

		.loginOut {
			margin-top: 667rpx;
			width: 670rpx;
			height: 88rpx;
			background: rgba(0, 196, 56, 1);
			border-radius: 45rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}

	.codeContent {
		width: 630rpx;
		height: 488rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		position: relative;
		padding: 40rpx;
		box-sizing: border-box;

		.closeIcon {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 28rpx;
			right: 28rpx;
		}

		.headerTitle {
			font-weight: 500;
			font-size: 36rpx;
			color: #3C3C3C;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 28rpx;
		}

		.content {
			font-weight: 400;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #66686F;
			margin-bottom: 40rpx;

			span {
				color: #FF545D;
				display: contents;
			}
		}

		.btn_option {
			display: flex;
			align-items: center;

			.cancel-btn {
				width: 266rpx;
				height: 84rpx;
				background: #EEEEEE;
				border-radius: 8rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #3C3C3C;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 18rpx;
			}


			.sure-btn {
				width: 266rpx;
				height: 84rpx;
				background: #EB3B27;
				border-radius: 8rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.loginPassword {
		width: 630rpx;
		height: 444rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		position: relative;
		padding: 40rpx;
		box-sizing: border-box;

		.closeIcon {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 28rpx;
			right: 28rpx;
		}

		.input-box {
			width: 550rpx;
			height: 84rpx;
			background: #F6F6F6;
			border-radius: 8rpx;
			margin-bottom: 40rpx;

			.inputBox {
				width: 100%;
				height: 100%;
				padding: 0 20rpx;
				box-sizing: border-box;
			}

		}


		.headerTitle {
			font-weight: 500;
			font-size: 36rpx;
			color: #3C3C3C;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 28rpx;
		}

		.content {
			font-weight: 400;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #66686F;
			margin-bottom: 40rpx;

			span {
				color: #FF545D;
				display: contents;
			}
		}

		.sure-btn {
			width: 550rpx;
			height: 84rpx;
			background: #EB3B27;
			border-radius: 8rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}


	.switchBox {
		width: 84rpx;
		height: 48rpx;
		position: relative;

		.switchIcon {
			width: 84rpx;
			height: 48rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.input-content {
		width: 580rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 26rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;

		.label {
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
		}

		.code {
			position: absolute;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #53A700;
			top: 27rpx;
			right: 24rpx;
		}

		.input-img {
			width: 44rpx;
			height: 44rpx;
			top: 23rpx;
			left: 24rpx;
			position: absolute;
		}

		input {
			height: 90rpx;
			line-height: 90rpx;
			flex: 1;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
			margin-left: 20rpx;
		}

		.placeholder {
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}
	}
</style>